<template>
<div>
	<div class="smp-result smp_panel">
		<div class="smp_panel_header" >
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">交易详情</div>
		</div>
		
		<!-- <div class="detailsTitle">交易信息</div> -->
		<div class=" smp_panel_body">
	<!-- 交易详情 -->
	<div class="smp-result smp_panel_1">
		<div class="smp_panel_header" >
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">基础信息</div>
		</div>
		
		<!-- <div class="detailsTitle">交易信息</div> -->
		<div class=" smp_panel_body">
			<el-descriptions size="mini" :column="4" border>
				<el-descriptions-item label="全局流水号">{{rowList.globalSeq}}</el-descriptions-item>
				<el-descriptions-item label="交易码">{{rowList.transcode}}</el-descriptions-item>
				<el-descriptions-item label="渠道机构">{{rowList.orgCode}}</el-descriptions-item>
				<el-descriptions-item label="服务编码(P)">{{rowList.pubSrvCode}}</el-descriptions-item>
				<el-descriptions-item label="服务编码(R)">{{rowList.regSrvCode}}</el-descriptions-item>
				<el-descriptions-item label="处理状态">{{rowList.status|dictName("SMP0022")}}</el-descriptions-item>
				<el-descriptions-item label="请求系统">{{rowList.pubSysCode|getSystemName}}({{rowList.pubSysCode}})</el-descriptions-item>
				<el-descriptions-item label="服务系统">{{rowList.regSysCode|getSystemName}}({{rowList.regSysCode}})</el-descriptions-item>
				<el-descriptions-item label="统计时间">{{rowList.logDate}}</el-descriptions-item>
				<el-descriptions-item label="ESB处理时间(ms)">{{rowList.esbProcTime}}</el-descriptions-item>
				<el-descriptions-item label="服务方处理时间(ms)">{{rowList.serverProcTime}}</el-descriptions-item>
				<el-descriptions-item label="异常代码" v-if="rowList.status=='FAIL'">{{rowList.esbErCode}}</el-descriptions-item>
				<el-descriptions-item label="异常信息" v-if="rowList.status=='FAIL'">{{rowList.esbErMsg}}</el-descriptions-item>
			</el-descriptions>
		
		</div>
		
		
		
		
		
		
		
		<div style="margin-top: 50px;margin-bottom: 30px;text-align: center;font-size: 14px;color:#606266">
			<div  style="border-bottom: 3px solid #002571; width: 96%;margin: auto;"></div>
			<!-- #6adfff -->
			<el-row style="margin-top: -29px;">
				<el-col v-for="item in list" :span="6">
				<div>{{item.name}}</div>
				<div><div class="circular"/></div>
				<div>{{item.time}}</div>
				</el-col>
			</el-row>
		</div>
		
	</div>
		
		
		<!-- <div class="smp_panel_body" >
			<div class="log">
				<div class="article">
					<div v-highlight v-html="msg" class="markdown-body" id="content"></div>	
				</div>
			</div>
		</div> -->
		
		
	<div class="smp-result smp_panel_1">	
		<div class="smp_panel_header">
		<div class="smp_panel_pre"></div>
		<div class="smp_panel_title">{{testEnvir == '01'? 'ESB':'外联ESB'}}收到 {{rowList.pubSysCode|getSystemName}}({{rowList.pubSysCode}})请求</div>
		</div>
		<div class="article smp_panel_body">
			<div v-highlight v-html="msg1" class="markdown-body" id="content"></div>	
		</div>
		</div>
		<div class="smp-result smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">{{testEnvir == '01'? 'ESB':'外联ESB'}}发出请求</div>
			</div>
		
		<div class="article smp_panel_body">
			<div v-highlight v-html="msg2" class="markdown-body" id="content"></div>	
		</div>
		</div>
		<div class="smp-result smp_panel_1">	
		<div class="smp_panel_header">
		<div class="smp_panel_pre"></div>
		<div class="smp_panel_title">{{rowList.regSysCode|getSystemName}}({{rowList.regSysCode}})响应{{testEnvir == '01'? 'ESB':'外联ESB'}}</div>
		</div>
		<div class="article smp_panel_body ">
			<div v-highlight v-html="msg3" class="markdown-body" id="content"></div>	
		</div>
		</div>
		<div class="smp-result smp_panel_1">	
		<div class="smp_panel_header">
		<div class="smp_panel_pre"></div>
		<div class="smp_panel_title"> {{rowList.pubSysCode|getSystemName}}({{rowList.pubSysCode}})收到{{testEnvir == '01'? 'ESB':'外联ESB'}}响应</div>
		</div>
		<div class="article smp_panel_body">
			<div v-highlight v-html="msg4" class="markdown-body" id="content"></div>	
		</div>
		</div>
		</div>
	</div>
	
	
</div>	
</template>

<script>
	"use strict";
	import {getBusinessFollowByLog,getFollowByLog} from '@/api/environment.js';
	// 将marked 引入
		
	export default {
		data() {
			return {
				row: {},
				rowList:[],
				list:[],
				msg:'',
				msg1:'',
				msg2:'',
				msg3:'',
				msg4:'',
				seqServiceLog:'',
				testEnvir:''
				}
		},
		
		created() {
			this.row = this.$route.query;
			this.seqServiceLog=this.row.seqServiceLog;
			
			this.testEnvir = this.row.testEnvir;
			
			this.getList();
		},
		methods: {
				
			getList() {
				
				getBusinessFollowByLog({"seqServiceLog":this.seqServiceLog,"testEnvir":this.testEnvir}).then(response => {
					this.rowList = response.data.extend
					if(this.testEnvir == '02' ){
						this.list.push({"name":"外联ESB收到"+this.getSystemName(this.rowList.pubSysCode)+"(" +this.rowList.pubSysCode+")请求","time":this.rowList.tranDataTime});
						this.list.push({"name":"外联ESB发出请求","time":this.rowList.toBizTime});
						this.list.push({"name":this.getSystemName(this.rowList.regSysCode)+"(" +this.rowList.regSysCode+")响应外联ESB","time":this.rowList.respBizTime});
						this.list.push({"name":this.getSystemName(this.rowList.pubSysCode)+"(" +this.rowList.pubSysCode+")收到外联ESB响应","time":this.rowList.respProxyTime});					
					}else{
					this.list.push({"name":"ESB收到"+this.getSystemName(this.rowList.pubSysCode)+"(" +this.rowList.pubSysCode+")请求","time":this.rowList.tranDataTime});
						this.list.push({"name":"ESB发出请求","time":this.rowList.toBizTime});
						this.list.push({"name":this.getSystemName(this.rowList.regSysCode)+"(" +this.rowList.regSysCode+")响应ESB","time":this.rowList.respBizTime});
						this.list.push({"name":this.getSystemName(this.rowList.pubSysCode)+"(" +this.rowList.pubSysCode+")收到ESB响应","time":this.rowList.respProxyTime});
					
					
					
					
					}
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				
				getFollowByLog({"seqServiceLog":this.seqServiceLog,"testEnvir":this.testEnvir}).then(response => {
					let obj = response.data.extend;
					/* let content ='';
						content ='##### 消息系统请求报文:\n```'+obj[0].type+'\n'+obj[0].msg+"\n```\n";
						content+='##### ESB请求服务系统报文:\n```'+obj[1].type+'\n'+obj[1].msg+"\n```\n";
						content+='##### 服务系统响应报文:\n```'+obj[2].type+'\n'+obj[2].msg+"\n```\n";
						content+='##### 消息系统响应报文:\n```'+obj[3].type+'\n'+obj[3].msg+"\n```";
					
					// 调用marked()方法，将markdown转换成html
					this.msg=  this.$marked(content); */
					
					let msg1 = '```'+obj[0].type+'\n'+obj[0].msg+"\n```";
					this.msg1=  this.$marked(msg1);
					
					let msg2 = '```'+obj[1].type+'\n'+obj[1].msg+"\n```";
					this.msg2=  this.$marked(msg2);
					
					let msg3 = '```'+obj[2].type+'\n'+obj[2].msg+"\n```";
					this.msg3=  this.$marked(msg3);
					
					let msg4 = '```'+obj[3].type+'\n'+obj[3].msg+"\n```";
					this.msg4=  this.$marked(msg4);
					
					
					
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
		}
	};
</script>

<style scoped>
	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 20px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}
	
	.serviceInfo {
		text-align: left;
		margin-left: 40px;
	}
	
	.serviceInfo span {
		line-height: 30px;
		text-align: left;
		color: #606266;
		font-size: 14px;
	}
	
	/* .logtext{
		margin-top: 10px;
		margin-left: 100px;
		margin-bottom: 10PX;
	} */
	
	.logName{
		text-align: left;
		margin-top: 10px;
		margin-left: 40px;
		--margin-bottom: 10PX;
		/* border-left: 3px solid #090; */
		line-height: 24px;
		--padding-left: 10px;
	}
	

	
	
</style>

<style scoped lang="less">
	
	.circular{
		border: 4px solid #67c23a;
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background: white;
		margin: auto;
	}
	
</style>